<template>
  <div>
    <el-button
      type="primary"
      style="margin-left: 20px; margin-top: 10px"
      class="butt"
      @click="addMenu"
      size="mini"
      icon="el-icon-plus"
      >添加功能</el-button
    >
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
      stripe
      border
      :row-style="{ height: '0px' }"
      :cell-style="{ padding: '0px' }"
      style="margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        prop="menuName"
        show-overflow-tooltip
        label="菜单名称"
        min-width="200"
      ></el-table-column>
      <el-table-column
        prop="oemName"
        show-overflow-tooltip
        label="业务标识"
        min-width="200"
      >
        <template slot-scope="scope">
          <div>
            <span v-if="scope.row.busFlag == 0">业务类</span>
            <span v-if="scope.row.busFlag != 0">非业务类</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="busName"
        show-overflow-tooltip
        label="菜单类型"
        min-width="200"
      ></el-table-column>
      <el-table-column show-overflow-tooltip label="状态" min-width="200">
        <template slot-scope="scope">
          <div>
            <el-switch
              v-model="scope.row.upStatus"
              @change="switchChange(scope.row)"
              active-color="#13ce66"
              active-value="0"
              inactive-value="1"
              inactive-color="#cccccc"
            >
            </el-switch>
          </div>
        </template>
      </el-table-column>
      <el-table-column min-width="190" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            v-if="jurisdiction != 2"
            @click="setInfo(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="mini"
            :disabled="scope.row.busFlag != 0"
            @click="jumpUrl(scope.row)"
            >配置</el-button
          >
          <el-button type="text" size="mini" @click="upMove(scope.row)"
            >上移</el-button
          >
          <el-button type="text" size="mini" @click="downMove(scope.row)"
            >下移</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建弹框 -->
    <el-dialog
      title="添加菜单"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="handleClose"
    >
      <div class="box">
        <el-form
          :label-position="labelPosition"
          label-width="80px"
          :model="form"
        >
          <el-form-item label="菜单名称">
            <el-input
              v-model="form.menuName"
              placeholder="请输入菜单名称"
            ></el-input>
          </el-form-item>
          <el-form-item label="业务标识">
            <el-select
              :disabled="setBool"
              v-model="form.busFlag"
              @change="lableChange"
              placeholder="请选择业务标识"
            >
              <el-option label="业务类" value="0"></el-option>
              <el-option label="非业务类" value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单类型">
            <el-select
              :disabled="setBool"
              v-model="form.busCode"
              placeholder="请选择菜单类型"
              v-if="form.busFlag == 0"
            >
              <el-option
                v-for="item in optionsMenu1"
                :key="item.busCode"
                :label="item.busName"
                :value="item.busCode"
              >
              </el-option>
            </el-select>
            <el-select
              :disabled="setBool"
              v-model="form.busCode"
              v-if="form.busFlag == 1"
              placeholder="请选择"
            >
              <el-option
                v-for="item in optionsMenu"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单标识" v-show="form.busFlag === '0'">
            <el-select v-model="form.orderFlag" placeholder="请选择">
              <el-option label="开" value="1"></el-option>
              <el-option label="关" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="订单名称" v-show="form.orderFlag === '1'">
            <el-input v-model="form.menuOrder"></el-input>
          </el-form-item>
          <el-form-item label="上传图片">
            <div>
              <el-upload
                ref="uploadImg"
                :action="httpurl + '/api/fileUpload'"
                :class="{ hide: hideUploadEdit }"
                list-type="picture-card"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-change="picChange"
                :on-success="successStatus"
                :file-list="imgList"
                :before-upload="beforeAvatarUpload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible1" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
          </el-form-item>
        </el-form>
        <div style="clear: both"></div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitData">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import https from "../../../plugins/https";
import axios from "axios";
export default {
  data() {
    return {
      imgList: "",
      // 菜单类型 是业务类型的话
      optionsMenu1: "",
      // 菜单类型  不是业务类型的话
      optionsMenu: "",
      // 控制是否显示上传
      hideUploadEdit: false,
      // 如果是修改的话不让修改的业务标识和菜单类型
      setBool: false,
      form: {
        upStatus: "", //展示状态
        menuName: "", //菜单名称
        busFlag: "", //业务标识
        busCode: "", //业务编号
        orderFlag: "", //订单标识
        menuOrder: "", //订单菜单名称
        menuImgList: [{ url: "" }],
      },
      //   控制查看大图
      dialogVisible1: false,
      // 上传图片地址
      httpurl: this.GLOBAL.httpurl,
      // 控制弹框
      dialogVisible: false,
      // 弹框
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      // 判断是不是创建
      type: "",
      //   表格数据
      tableData: [],
    };
  },
  created() {
    this.getTabelData();
  },
  methods: {
    // 上移
    upMove(val) {
      axios
        .post("/api/sys/cltMenu/changeMenuSort", { uid: val.uid, sortType: 0 })
        .then((res) => {
          console.log("上移");
          console.log(res);
          if (res.data.code == "0000") {
            this.getTabelData();
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 上移
    downMove(val) {
      axios
        .post("/api/sys/cltMenu/changeMenuSort", { uid: val.uid, sortType: 1 })
        .then((res) => {
          console.log("下移");
          console.log(res);
          if (res.data.code == "0000") {
            this.getTabelData();
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //   图片发生变化
    picChange(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1;
    },
    //   获取列表数据
    getTabelData() {
      https
        .querySysCltMenulist({})
        .then((result) => {
          console.log(result);
          this.tableData = result.data.data;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 业务标识发生变化
    lableChange(val) {
      this.form.busCode = "";
      this.form.orderFlag = "";
      this.form.menuOrder = "";
      if (val == "0") {
        axios
          .post("api/business/getAllBusInfo", { status: 0 })
          .then((res) => {
            console.log("下拉拽太");
            console.log(res);
            this.optionsMenu1 = res.data.data;
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        axios
          .post("api/sys/dict/queryDictList", { type: "other_bus_code" })
          .then((res) => {
            console.log("下拉拽太");
            this.optionsMenu = res.data.data;
            console.log(res);
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    // 图片上传成功
    successStatus(response, file, fileList) {
      console.log(response);
      this.form.menuImgList[0].url = response.data.filePath;
    },
    // 修改是数据
    setInfo(val) {
      this.setBool = true; // 先要获取回显
      this.type = "aaa";
      axios
        .post("api/sys/cltMenu/getMenuInfo", { uid: val.uid })
        .then((res) => {
          this.lableChange(res.data.data.busFlag);
          setTimeout(() => {
            this.form = res.data.data;
            console.log("zheshi form");
            console.log(this.form);
            this.imgList = res.data.data.menuImgList;
            this.hideUploadEdit = res.data.data.menuImgList.length >= 1;
            this.dialogVisible = true;
            console.log(res);
          }, 300);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 获取回显的数据
    async getData(val) {
      await axios
        .post("api/sys/cltMenu/getMenuInfo", { uid: val.uid })
        .then((res) => {
          this.form = res.data.data;
          console.log(res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    //  配置 跳转链接
    jumpUrl(val) {
      this.$router.push({
        name: "cardConfig",
        query: val,
      });
    },
    //   添加出现弹出框
    addMenu() {
      this.type = "create";
      this.form.upStatus = "";
      this.form.menuName = "";
      this.form.busFlag = "";
      this.form.busCode = "";
      this.form.orderFlag = "";
      this.form.menuOrder = "";
      this.hideUploadEdit = false;
      this.setBool = false;
      if (
        this.form.menuImgList &&
        Array.isArray(this.form.menuImgList) &&
        this.form.menuImgList.length >= 1
      ) {
        if (this.form.menuImgList[0].url != "") {
          (this.form.menuImgList = [{ url: "" }]),
            this.$refs.uploadImg.clearFiles();
        }
      } else {
        this.form.menuImgList = [{ url: "" }];
      }

      this.dialogVisible = true;
    },
    submitData() {
      console.log(this.form);

      if (this.type == "create") {
        this.form.uid = undefined;
      }
      if (
        this.form.menuName != "" &&
        this.form.busFlag != "" &&
        this.form.busCode != "" &&
        this.form.menuImgList[0].url != ""
      ) {
        if (this.form.busFlag == "0") {
          if (this.form.orderFlag == "1" && this.form.menuOrder != "") {
            axios
              .post("api/sys/cltMenu/saveMenu", this.form)
              .then((res) => {
                if (res.data.code == "0000") {
                  layer.open({
                    content: res.data.msg,
                    skin: "msg",
                    time: 1, //1秒后自动关闭
                  });
                  this.getTabelData();
                  this.dialogVisible = false;
                } else {
                  layer.open({
                    content: res.data.msg,
                    skin: "msg",
                    time: 1, //1秒后自动关闭
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            console.log(this.form);
          } else {
            axios
              .post("api/sys/cltMenu/saveMenu", this.form)
              .then((res) => {
                if (res.data.code == "0000") {
                  layer.open({
                    content: res.data.msg,
                    skin: "msg",
                    time: 1, //1秒后自动关闭
                  });
                  this.getTabelData();
                  this.dialogVisible = false;
                } else {
                  layer.open({
                    content: res.data.msg,
                    skin: "msg",
                    time: 1, //1秒后自动关闭
                  });
                }
              })
              .catch((err) => {
                console.log(err);
              });
            console.log(this.form);
          }
        } else {
          axios
            .post("api/sys/cltMenu/saveMenu", this.form)
            .then((res) => {
              if (res.data.code == "0000") {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 1, //1秒后自动关闭
                });
                this.getTabelData();
                this.dialogVisible = false;
              } else {
                layer.open({
                  content: res.data.msg,
                  skin: "msg",
                  time: 1, //1秒后自动关闭
                });
              }
            })
            .catch((err) => {
              console.log(err);
            });
          console.log(this.form);
        }
      } else {
        layer.open({
          content: "数据全为必填",
          skin: "msg",
          time: 1, //1秒后自动关闭
        });
      }

      return;

      axios
        .post("api/sys/cltMenu/saveMenu", this.form)
        .then((res) => {
          if (res.data.code == "0000") {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
            this.getTabelData();
            this.dialogVisible = false;
          } else {
            layer.open({
              content: res.data.msg,
              skin: "msg",
              time: 1, //1秒后自动关闭
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(this.form);
      return;
    },
    // 开关切换
    switchChange(val) {
      console.log(val);
      axios
        .post("/api/sys/cltMenu/changeMenuStatus", { uid: val.uid })
        .then((res) => {
          console.log(res);
          this.getTabelData();
        })
        .catch((err) => {
          console.log(err);
        });
    },
    handleRemove(file, fileList) {
      this.hideUploadEdit = fileList.length >= 1;
      this.form.menuImgList[0].url = "";
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    // 上传图片类目
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("只能上传图片");
      }
      //   const isSize = new Promise((resolve, reject) => {
      //     const width = 90;
      //     const height = 90;
      //     const _URL = window.URL || window.webkitURL;
      //     const img = new Image();
      //     img.onload = () => {
      //       const valid = img.width == width && img.height == height;
      //       valid ? resolve() : reject();
      //     };
      //     img.src = _URL.createObjectURL(file);
      //   }).then(
      //     () => {
      //       return file;
      //     },
      //     () => {
      //       layer.open({
      //         content: "图片尺寸限制为90 x 90",
      //         skin: "msg",
      //         time: 2, //1秒后自动关闭
      //       });
      //       // this.$notify({title: "错误",message: ,type: "error"});
      //       return Promise.reject();
      //     }
      //   );
      return isJPG;
    },
  },
};
</script>

<style scoped>
/deep/ .el-form {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
/deep/ .el-upload-list__item {
  transition: none !important;
}
/deep/ .el-table--border::after,
.el-table--group::after,
.el-table::before {
  background: none;
}
</style>
<style>
.el-tabs__content {
  overflow: auto !important;
}
</style>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>